<template>
  <div class="notice">
    <div class="content_box_right_top">
      <div class="content_box_right_top_left">
        <span class="content_box_right_top_left_span_bg">
          公告主页
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
        <span class="content_box_right_top_left_span_bg">
          宿舍管理
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
        <span class="content_box_right_top_left_span_bg">
          学生管理
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
        <span>
          公告管理
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
      </div>
      <div class="content_box_right_top_right">
        <span>
          标签选项
          <img
            src="../assets/images/heder_todown.png"
            class="content_box_right_top_right_img_down"
          />
        </span>
      </div>
    </div>
    <div>
      <hr />
    </div>
    <!-- 公告管理 -->
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <el-input
          placeholder="请输入公告标题..."
          v-model="noticeInfo"
          clearable
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="onSearchInfo"
          >搜索</el-button
        >
        <el-button type="primary" icon="el-icon-edit" @click="onReset"
          >重置</el-button
        >
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="addDialog = true"
          plain
          >添加</el-button
        >
      </div>

      <!-- 公告表格数据 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="n_id"
          label="公告编号"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="n_title"
          label="公告标题"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="n_content"
          label="公告内容"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="n_time"
          label="发布时间"
          align="center"
          width="180"
          :formatter="dateFormat"
        >
        </el-table-column>
        <el-table-column
          prop="n_a_id"
          label="管理员Id"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="n_a_name"
          label="发布人"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- width="292" -->
            <el-button
              type="text"
              size="small"
              @click="delNoticeInfo(scope.row.n_id)"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="(editDialog = true), editNoticeInfo(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <el-pagination
        @current-change="n_changePage"
        background
        layout="prev, pager, next"
        :page-size="n_count"
        :total="total"
      >
      </el-pagination>
    </el-col>
    <!-- 新增公告 -->
    <el-dialog title="添加公告信息" :visible.sync="addDialog" width="30%">
      <el-form :model="addNoticeData">
        <el-form-item label="公告标题" :label-width="formLabelWidth">
          <el-input
            v-model="addNoticeData.n_title"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="公告内容" :label-width="formLabelWidth">
          <el-input
            v-model="addNoticeData.n_content"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="发布时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="addNoticeData.n_time"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="center"
            type="datetime"
            placeholder="选择日期"
            :picker-options="pickerData"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="管理员id" :label-width="formLabelWidth">
          <el-select
            v-model="addNoticeData.n_a_id"
            placeholder="请选择管理员Id.."
            @change="changeSelect"
          >
            <el-option label="101" value="101"></el-option>
            <el-option label="201" value="201"></el-option>
            <el-option label="202" value="202"></el-option>
            <el-option label="203" value="203"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员名称" :label-width="formLabelWidth">
          <el-select
            v-model="addNoticeData.n_a_name"
            placeholder="请选择管理员名字.."
          >
            <el-option label="学生管理员" value="学生管理员"></el-option>
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通管理员" value="普通管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="addNoticeSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改公告数据 -->
    <el-dialog title="修改公告信息" :visible.sync="editDialog" width="30%">
      <el-form :model="editNoticeData">
        <el-form-item label="公告标题" :label-width="formLabelWidth">
          <el-input
            v-model="editNoticeData.n_title"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="公告内容" :label-width="formLabelWidth">
          <el-input
            v-model="editNoticeData.n_content"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="发布时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="editNoticeData.n_time"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="center"
            type="datetime"
            placeholder="选择日期"
            :picker-options="pickerData"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="管理员id" :label-width="formLabelWidth">
          <el-select
            v-model="editNoticeData.n_a_id"
            placeholder="请选择管理员Id.."
            @change="changeEditSelect"
          >
            <el-option label="101" value="101"></el-option>
            <el-option label="201" value="201"></el-option>
            <el-option label="202" value="202"></el-option>
            <el-option label="203" value="203"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员名称" :label-width="formLabelWidth">
          <el-select
            v-model="editNoticeData.n_a_name"
            placeholder="请选择管理员名字.."
          >
            <el-option label="学生管理员" value="学生管理员"></el-option>
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通管理员" value="普通管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="editNoticeSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      noticeInfo: "",
      addDialog: false,
      editDialog: false,
      formLabelWidth: "100px",
      tableData: [],
      addNoticeData: {
        n_title: "",
        n_content: "",
        n_time: "",
        n_a_id: "",
        n_a_name: "",
      },
      // 日期
      pickerData: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      /*      editNoticeData: {
        n_title: "",
        n_content: "",
        n_time: "",
        n_a_id: "",
        n_a_name: "",
      }, */
      editNoticeData: [],
      total: 0,
      n_page: 1,
      n_count: 5,
    };
  },
  methods: {
    dialogFormVisible: function () {
      this.addDialog = false;
      this.editDialog = false;
    },
    n_getData: function () {
      this.$axios({
        url: "/notice_getInfo",
        method: "post",
        data: {
          title_search: this.noticeInfo,
          n_page: this.n_page,
          n_count: this.n_count,
        },
      }).then(({ data }) => {
        if (data.error == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    // 分页
    n_changePage: function (page) {
      this.n_page = page;
      this.n_getData();
    },
    // 搜索
    onSearchInfo: function () {
      this.n_getData();
    },
    // 重置
    onReset: function () {
      let Info = (this.noticeInfo = "");
      this.$axios({
        url: "/notice_getInfo",
        method: "post",
        data: {
          title_search: Info,
          n_page: this.n_page,
          n_count: this.n_count,
        },
      }).then(({ data }) => {
        if (data.error == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    // 添加
    addNoticeSave: function () {
      this.$axios({
        url: "/add_noticeInfo",
        method: "post",
        data: this.addNoticeData,
      }).then(({ data }) => {
        if (data.error == 0) {
          this.$message.success("公告添加成功");
          this.addDialog = false;
          this.n_getData();
        } else {
          this.$message.error("公告添加失败");
        }
      });
    },
    // 删除
    delNoticeInfo: function (n_id) {
      let Id = n_id;
      this.$axios({
        url: "/n_delNoticeInfo",
        method: "post",
        data: {
          n_id: Id,
        },
      }).then(({ data }) => {
        if (data.error == 0) {
          this.$message.success("删除成功!");
          this.n_getData();
        } else {
          this.$message.error("删除失败！！");
        }
      });
    },
    // 修改
    editNoticeInfo: function (row) {
      let editNoticeData = {...row}
      this.editNoticeData = editNoticeData;
      // console.log(this.editNoticeData.n_time)
    },
    editNoticeSave: function () {
      this.$axios({
        url: "/revise_noticeInfo",
        method: "post",
        data: this.editNoticeData,
      }).then(({ data }) => {
        if (data.error == 0) {
          this.$message.success("数据修改成功！");
          this.n_getData();
          this.editDialog = false;
        } else {
          this.$message.error("数据修改失败！");
        }
      });
    },
    // 下拉
    changeSelect: function () {
      if (this.addNoticeData.n_a_id == 101) {
        this.addNoticeData.n_a_name = "学生管理员";
      } else if (this.addNoticeData.n_a_id == 201) {
        this.addNoticeData.n_a_name = "超级管理员";
      } else if (this.addNoticeData.n_a_id == 202) {
        this.addNoticeData.n_a_name = "普通管理员";
      } else if (this.addNoticeData.n_a_id == 203) {
        this.addNoticeData.n_a_name = "超级管理员";
      }
    },
    changeEditSelect: function () {
      if (this.editNoticeData.n_a_id == 101) {
        this.editNoticeData.n_a_name = "学生管理员";
      } else if (this.editNoticeData.n_a_id == 201) {
        this.editNoticeData.n_a_name = "超级管理员";
      } else if (this.editNoticeData.n_a_id == 202) {
        this.editNoticeData.n_a_name = "普通管理员";
      } else if (this.editNoticeData.n_a_id == 203) {
        this.editNoticeData.n_a_name = "超级管理员";
      }
    },
    // 时间格式化
    dateFormat: function (row) {
      let data = new Date(row.n_time);
      let year = data.getFullYear(),
        month = data.getMonth() + 1,
        day = data.getDate(),
        hour = data.getHours(),
        min = data.getMinutes(),
        sec = data.getSeconds();
      let dataTime =
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (min < 10 ? "0" + min : min) +
        ":" +
        (sec < 10 ? "0" + sec : sec);
      return dataTime;
    },
  },
  mounted: function () {
    this.n_getData();
  },
};
</script>



<style scoped lang='less'>
.notice {
  .content_box_right {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    margin-right: 20px;
    display: none;
  }
  .content_box_right_top {
    width: calc(100% - 30px);
    height: 50px;
    margin: 20px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 6px 5px rgb(212, 212, 212);
  }
  .content_box_right_top_left span {
    width: 100px;
    height: 20px;
    padding: 7px;
    background-color: #4985fb;
    margin-left: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
  }
  .content_box_right_top_left_img_x {
    position: relative;
    top: 2px;
    left: 2px;
  }
  .content_box_right_top_right span {
    width: 100px;
    height: 20px;
    padding: 7px;
    background-color: #4985fb;
    margin-right: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
  }
  .content_box_right_top_right_img_down {
    position: relative;
    top: -2px;
    left: 1px;
  }
  .content_box_right_content_title {
    font-size: 16px;
    width: 100%;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    background-color: #fff;
    box-sizing: border-box;
    padding-left: 30px;
    font-weight: bold;
  }
  .content_box_right_content_message {
    width: calc(100% - 30px);
    margin: 20px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 6px 5px rgb(212, 212, 212);
  }
  div hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #000;
  }
  /* span标签背景 */
  .content_box_right_top_left_span_bg {
    background-color: #fff !important;
    color: #6a6a6a !important;
    border: 1px solid #ccc;
  }

  // 表格布局
  .el-col {
    width: 100%;
    padding-left: 20px;
    padding-right: 40px;
    .el-input {
      width: 220px;
    }
    .el-button {
      margin-left: 20px;
    }
    .el-table {
      margin-top: 20px;
      text-align: center;
      border-radius: 8px;
    }
    .el-table-column {
      text-align: center;
    }
    .el-pagination {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>